<template>
  <h1>修改患者住院信息</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">

    <el-form-item label="患者姓名" prop="patientName">
      <el-input v-model="form.data.patientName" style="width: 218px;" disabled />
    </el-form-item>

    <el-form-item label="患者性别" prop="gender">
      <el-input v-model="form.data.gender" style="width: 218px;" disabled />
    </el-form-item>

    <el-form-item label="患者身份证号" prop="identity">
      <el-input v-model="form.data.identity" style="width: 218px;" disabled />
    </el-form-item>

    <el-form-item label="科室" prop="departmentName">
      <el-input v-model="form.data.departmentName" style="width: 218px;" disabled />
    </el-form-item>

    <el-row>
      <el-form-item label="就诊医生" prop="doctorId">
        <el-select v-model="form.data.doctorId"
                   :clearable="true"
                   @change="roomIdChange">
          <el-option v-for="item in doctors.data"
                     :key="item.employeeId"
                     :label="item.employeeName"
                     :value="item.employeeId" />
        </el-select>
      </el-form-item>

      <el-form-item label="病房号" prop="roomId">
        <el-select v-model="form.data.roomId"
                   placeholder="请选择房间号"
                   :clearable="true"
                   @change="roomIdChange">
          <el-option v-for="item in roomIds.data"
                     :key="item.roomId"
                     :label="item.roomNumber"
                     :value="item.roomId" />
        </el-select>
      </el-form-item>

      <el-form-item label="病床号" prop="bedNum">
        <el-select v-model="form.data.bedId" :clearable="true">
          <el-option v-for="item in bedNums.data"
                     :key="item.bedId"
                     :label="item.bedNum"
                     :value="item.bedId" />
        </el-select>
      </el-form-item>
      <!--      <el-col :span="6">-->
      <!--        <el-form-item label="职务" prop="position">-->
      <!--          <el-select v-model="form.data.position" placeholder="请选择职务">-->
      <!--            <el-option v-for="item in positions.data"-->
      <!--                       :key="item.position"-->
      <!--                       :label="item.position"-->
      <!--                       :value="item.position" />-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->

    </el-row>


    <el-form-item label="住院日期" style="width:330px" prop="createTime">
      <el-date-picker
        v-model="form.data.createTime"
        type="date"
        placeholder="请选择日期"
        style="width:300px;"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref } from "vue";
import { getEmployeeByDid } from "@/utils/api";
import { getSalaryTotalAndType } from "@/utils/salaryRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";
import { getRoomIdAndNumberApi } from "@/utils/RoomRequest";
import { getBedNumAndIdApi } from "@/utils/BedRequest";
import { GetInHospitalByIdApi, updateInHospitalApi } from "@/utils/InHospitalRequest";

const route = useRoute();

const form = reactive({
  data: {}
});


//病房的id和房间号，该部门的所有医生
const roomIds = reactive({
  data: []
});

const bedNums = reactive({
  data: []
});


const doctors = reactive({
  data: []
});

const getRooIdAndRoomNumber = async (id) => {
  //发送请求
  let res = await getRoomIdAndNumberApi(id);
  // 为roomIds.data 赋值
  roomIds.data = res.data;
};

//选择未使用的病床
const roomIdChange = async (id) => {
  const res = await getBedNumAndIdApi(id);
  bedNums.data = res.data;
  bedNums.data.push({
    "bedId": 6,
    "bedNum": 2
  });
};

//获取医生的id和姓名
const getDoctorIdAndDoctor = async () => {
  let res = await getEmployeeByDid(form.data.departmentId);
  doctors.data = res.data;
};

//表单校验规则
const rules = reactive({
  employeeName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度为2~10", trigger: "blur" }
  ],
  userAccount: [
    { required: true, message: "请输入员工账号", trigger: "blur" },
    { min: 8, max: 10, message: "姓名长度为8~10", trigger: "blur" }
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
  ],
  departmentId: [
    { required: true, message: "请选择部门", trigger: "blur" }
  ],
  position: [
    { required: true, message: "请选择职务", trigger: "blur" }
  ],
  salaryType: [
    { required: true, message: "请选择薪资", trigger: "blur" }
  ],
  bithday: [
    { required: true, message: "请输入日期", trigger: "blur" }
  ],
  roler: [
    { required: true, message: "员工的角色", trigger: "blur" }
  ],
  gender: [
    { required: true, message: "必须选择性别", trigger: "blur" }
  ]
});

const ruleFormRef = ref();


//重置
const reset = () => {
  form.data = {};
};

onMounted(() => {
  UpdateInhostpitalDate();
});


//回显要修改员工的数据
const UpdateInhostpitalDate = async () => {
  //查询单个信息
  let res = await GetInHospitalByIdApi(route.query.id);
  form.data = res.data;
  form.data.oldBedId = form.data.bedId;
  //获取病房id
  getRooIdAndRoomNumber(3);
  //获取医生id和姓名
  getDoctorIdAndDoctor();

  roomIdChange(form.data.roomId);
};


//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      ElMessageBox.confirm(
        "确定要修改吗?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          //发送修改的请求
          let res = await updateInHospitalApi(form.data);
          if (res.data) {
            ElMessage({
              type: "success",
              message: "修改成功"
            });
            router.push({
              path: "/home/dIn"
            });
          } else {
            ElMessage({
              type: "error",
              message: "修改失败"
            });
          }
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消修改"
          });
        });

    }
  });
};

</script>


<style scoped>
</style>